<template>
	<div class="collection">
		<div class="head">
			<el-checkbox v-model="checkAllFlag" @change="checkAll()"></el-checkbox>
			<el-button @click="deleteAll()">删除</el-button>
			<div class="right">
				<el-button @click="goRouter()" :disabled="load" v-model="load">刷新</el-button>
			</div>
		</div>
		<div class="body" >
			<div class="item" v-for="(item,index) in collections" :key="index">
				<div class="check">
					<el-checkbox class="checkbox" v-model="item.checked" @change="checkOne()"></el-checkbox>
					{{index+1}}
				</div>
				<div class="img">
					<div class="headimg" v-bind:style="{backgroundImage:item.urlimg}"></div>
					<!-- {{item.title.substr(0,5)}} -->
					{{item.webSite}}
				</div>
				<div class="desc">
					<span class="title" @click="queryarticle(item)" v-html="filterHtml(item.title)"></span>
					<p v-html="filterHtml(item.content)"></p>
				</div>
				<div class="addtime">
					<div class="data">{{getDate(item.poTime)}}</div>
					<div class="time">{{getTime(item.poTime)}}</div>
				</div>
				<div class="close">×</div>
			</div>
		</div>
		<!-- 分页 -->
	    <div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page=1
		      :page-size="pageSize"
		      layout="total, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
	    </div>
	</div>
</template>
<script>
	import moment from 'moment'
	export default{
		name:'collection',
		data(){
			return{
				checkAllFlag:false,
				pageNum:1,
				pageSize:30,
				collectionData:'',
				collections:[],
				total:0,
				load:false
			}
		},
		mounted(){
			this.getCollection()
		},
		methods:{
			getCollection(){
				this.$http.post('vrv-monitor-platform-web/collection/queryByOrgCode',{
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}).then((res)=>{
					this.$store.commit('Loadingfalse');
					this.collectionData = res.body
					this.total = res.body.total
					this.collections = res.body.data
					this.collections.forEach((value,index)=>{
						this.$set(value,'checked', false )
						 let imgurl = value.domain
	                    this.$http.get(`static/${imgurl}.png`).then(res=>{
	                    	this.$set(value,'urlimg', `url(static/${imgurl}.png)` )
		                }).catch(err=>{
		                    	this.$set(value,'urlimg',"url('static/defult.png')")
		                })
					})
				})
			},
			getDate(value){
				return moment(value).format('YYYY-MM-DD')
			},
			getTime(value){
				return moment(value).format('HH:mm:ss')
			},
			// 全选
			checkAll(){
				this.collections.forEach((value,index)=>{
	    			value.checked = this.checkAllFlag
	    		})
			},
			checkOne(){
		    	if(this.checkAllFlag){
		    		this.checkAllFlag = false
		    	}
		    },
		    filterHtml(value){
		    	let _value = value.replace(/<br \/>/g, "")
		    	_value = _value.replace(/<vrv-img\/>/g, "")
					_value = _value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
		    	return _value
		    },
		    // 文章查询
		    queryarticle(item){
		      let flag = typeof(item.title)!='undefined'
		      let id = flag?item.favoriteId:item.data[0].favoriteId
		      this.$store.dispatch('queryarticle',{
		        id:id,
						keywords:item.keyword,
		      });
		    },
		    deleteAll(){
					let arr = []
					for(let i=0;i<this.collections.length;i++){
						let item = this.collections[i]
						if(item.checked == true){
							arr.push(item.favoriteId)
						}
					}
					this.$http.post('vrv-monitor-platform-web/collection/delete',{
						favoriteIds:arr.join(',')
					}).then((res)=>{
						if(res.body.success==true){
							this.getCollection()
						}else{
							this.$message.error(res.body.message)
						}
					})	
		    },
		    // 刷新
		    goRouter(){
				this.load = true
				this.$store.commit('LoadingTrue');
		    	this.getCollection()
				setTimeout(()=>{
					this.load = false
				},1000)
		    },
		   	handleSizeChange(val) {
		        this.pageSize = val
		        this.getCollection()
		    },
		    handleCurrentChange(val) {
		        this.pageNum = val
		        this.getCollection()
		    },

		}
	}
</script>
<style scoped>
	.head{
		height: 3.5rem;
		padding: 0 1.5rem;
		line-height: 3.5rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.head >.el-checkbox{
		margin-right: 6rem;
	}
	.head button{
		width: 5rem;
		height: 2.12rem;
	}
	.checkbox{
		margin-right: 0.6rem;
	}
	.right{
		float: right;
	}
	.right select{
		width: 5rem;
		height: 2.12rem;
		border: 1px solid #bfcbd9;
		border-radius: 4px;
		margin-right: 1rem;
		transform:translateY(-2px);
	}
	.item{
		position: relative;
		display: flex;
		height: 9.4rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.item .check {
		width: 6.6rem;
		flex:0 0 6.6rem;
		padding-left: 1.5rem;
		line-height: 9.4rem;
		border-right: 1px solid #dcdcdc;
	}
	.item .img{
		width: 11.25rem;
		text-align: center;
		border-right: 1px solid #dcdcdc;
		font-size: 0.88rem;
		color: #000;
	}
	.item .img img{
		display: block;
		margin: 0 auto;
		width: 3.75rem;
		height: 3.75rem;
		border-radius: 50%;
		border:1px solid #dcdcdc;
		margin-top: 2rem;
		margin-bottom: 0.6rem;
	}
	.desc{
		flex:1;
		padding: 2.4rem 1.8rem;
		border-right: 1px solid #dcdcdc;
		overflow: hidden;
	}
	.desc .title{
		font-size: 0.88rem;
		color: #000;
		font-weight: bold;
		cursor: pointer;
	}
	.desc  p{
		margin: 0;
		font-size: 0.88rem;
		color: #666;
		height: 100%;
		overflow: hidden;
	}
	.item .addtime{
		width: 10rem;
		text-align: center;
		font-size: 0.88rem;
		padding-top: 4rem;
		color: #000;
	}
	.close{
		position: absolute;
		top: 50%;
		right: 0.5rem;
		font-size: 2rem;
		color: #f19149;
		margin-top: -1.2rem;
		cursor: pointer;
		display: none;
	}
	.block{
		text-align: right;
		padding: 0.93rem 0.93rem;
	}
	.headimg{
		  width:3.75rem;
          height:3.75rem;
          border-radius :50%;
          margin :2rem auto .6rem auto;
          background-color: #eeeeee;
          background-size :cover;
          background-position: center;
		  border: 1px solid #dcdcdc;
	}
</style>